<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>查看教练</title>
	<link rel="shortcut icon" href="../images/browserLOGO2.png" type="image/x-icon" />
	<meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/layer-animate.css"/> <!-- 弹窗组件 -->
    <link rel="stylesheet" href="../layui/css/layui.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!-- 弹窗组件 -->
	<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="../js/method.js"></script>
	
	<!-- 网页字体库 -->
	<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext"
	 rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#map{height:500px;width:100%;}
		dl,dt,dd,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	dt{
		font-size:14px;
		font-family:"微软雅黑";
		font-weight:bold;
		border-bottom:1px dotted #000;
		padding:5px 0 5px 5px;
		margin:5px 0;
	}
	dd{
		padding:5px 0 0 5px;
	}
	li{
		line-height:28px;
	}
	#coachInfo{
		color: blue;
	}
	#coachInfo:hover{
		color: gold;
		cursor: pointer;
	}
	.coach-info-content{
		width:30%;
		float:left;
		color:blue;
		font-weight:800;
		text-align: center;
	}
	.navbar-brand {
		font-family: 'Tangerine', cursive;
		color:white;
		font-size: 100%;
	}
	
	</style>
	<!-- 百度地图api -->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vlFc2R4e9kd3425rhMY40ZENc02HuD47"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
	</head>
<body style="background-image: url('../images/title2.jpg');background-size: cover">
	<!-- 顶部导航栏 -->
	<div class="layui-layout layui-layout-admin"  >
		<div class="layui-header header header-demo" summer>
			<div class="layui-main">
				<h1 style=""><a class="navbar-brand" href="../home.jsp" style="margin-left: 5%;margin-top: 20%">
					Yoga
					<!-- <img alt="" src="../images/LOGO-白色剪影.png" width="3%"> -->
				</a></h1>
				<ul class="layui-nav layui-layout-right" style="margin-right: 5%;">
				  <li class="layui-nav-item"><a href="/home.jsp">主页</a></li>
				  <li class="layui-nav-item">
				    <a href="javascript:;">教练</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/myCoach.jsp">我的教练</a></dd>
				      <dd><a href="#">附近教练</a></dd>
				    </dl>
				  </li>
				  <li id="student" class="layui-nav-item">
				    <a href="javascript:;">学员</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/myCoach.jsp">我的学员</a></dd>
				      <dd><a href="/viewStudent.jsp">附近学员</a></dd>
				    </dl>
				  </li>
				 <li id="gym" class="layui-nav-item">
				    <a href="javascript:;">场馆</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/vi_user_coach/viewGym">附近场馆</a></dd>
				    </dl>
				  </li>
				  <li class="layui-nav-item">
				    <a href="javascript:;">通知</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/html/attentionDynamics.html">关注动态</a></dd>
				      <dd><a href="/html/sessionInfo.html">会话</a></dd>
				      
				      <!-- 留言功能未实现功能 -->
				      <!-- <dd><a href="">留言查看</a></dd> -->
				      
				    </dl>
				  </li>
				  <li class="layui-nav-item">
				    <a href="javascript:;">我</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/html/myFollowed.html">我的关注</a></dd>
				      <dd><a href="/html/myFriend.html">我的好友</a></dd>
				      <dd><a th:href="@{'/userAction/findUserByUid?uid='+${session.uid}}">我的钱包</a></dd>
				      <dd id="myOrder"></dd>
				      <dd id="myInfo"></dd>
				      <dd><a href="/logout">退出登录</a></dd>
				    </dl>
				  </li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="layui-container">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 			<legend>按条件搜索教练</legend>
		</fieldset>
		<form id="searchCoachCondition" class="layui-form">
			<div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">课程费</label>
			      <div class="layui-input-inline" style="width: 100px;">
			        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" onkeyup="value=value.replace(/[^1234567890.-]+/g,'')">
			      </div>
			      <div class="layui-form-mid">-</div>
			      <div class="layui-input-inline" style="width: 100px;">
			        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"  onkeyup="value=value.replace(/[^1234567890.-]+/g,'')">
			      </div>
			   </div>
			</div> 
			
			<div class="layui-form-item">
			    <label class="layui-form-label">上课时间</label>
			    <div class="layui-input-block">
			      <input type="checkbox" name="week" value="星期一" title="星期一">
			      <input type="checkbox" name="week" value="星期二" title="星期二">
			      <input type="checkbox" name="week" value="星期三" title="星期三">
			      <input type="checkbox" name="week" value="星期四" title="星期四">
			      <input type="checkbox" name="week" value="星期五" title="星期五">
			      <input type="checkbox" name="week" value="星期六" title="星期六">
			      <input type="checkbox" name="week" value="星期日" title="星期日">
			    </div>
			</div> 
			
			<div class="layui-form-item">
			    <label class="layui-form-label">流派</label>
				<div class="layui-input-block" style="width: 250px;">
				   <input type="text" name="style" lay-verify="style" autocomplete="off" placeholder="如：哈他瑜伽、阿努萨拉瑜伽..." class="layui-input">
				</div>
			</div>
				
			<div class="layui-form-item"> 
				<label class="layui-form-label">认证</label>
			    <div class="layui-input-block">
			      <input type="radio" name="authentication" value="1" title="场馆认证" checked="">
			      <input type="radio" name="authentication" value="2" title="官方认证">
			      <input type="radio" name="authentication" value="0" title="未认证">
			    </div>
			</div>
		
		
			 <div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn" lay-submit lay-filter="searchCoach">搜索</button>
				      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				    </div>
			  </div>
		  </form>
	</div>
	
	<div class="layui-container">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 			<legend>附近的教练</legend>
		</fieldset>
		<div>
			<div id="map"></div>
		</div>
	</div>


</body>
</html>
<script type="text/javascript" th:inline="javascript">
	$(document).ready(function() {
		searchAllCoach();
		if([[${session.userRole}]] == "student") {
			// 我的订单
			$("#myOrder").html('<a  href="/jsp/studentOrder.jsp">我的订单</a>');
			// 个人中心
			$("#myInfo").html('<a href="/html/studentBasic.html">个人中心</a>');
			$("#student").remove();
		}
		
		if([[${session.userRole}]] == "gym") {
			// 个人中心
			$("#myInfo").html('<a href="/html/gymBasic.html">个人中心</a>');
			$("#gym").remove();
		}
		
	});
	
	
	var userAddr = [[${session.address}]];// document.getElementById("userAddress").value;
	if(userAddr == null) {
		alert("请先登录！");
		location.href="http://localhost:8080/";
	}
	// 百度地图API功能
	var map = new BMap.Map("map");
	// 创建地址解析器实例     
	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上，并调整地图视野    
	myGeo.getPoint(userAddr, function(point){      
	    if (point) {      
	        map.centerAndZoom(point, 16);
	        var icon = new BMap.Icon("../icon/红色定位.png",new BMap.Size(32, 32), {
			    offset: new BMap.Size(10, 25),
			    imageOffset: new BMap.Size(0, 0)
			  });
	        map.addOverlay(new BMap.Marker(point,{icon: icon}));
	    }      
	 }, 
	"成都市");
	map.enableScrollWheelZoom(true);
	
	var index = 0;
	// 获取所有教练的地址
	// 将所有教练的地址存入
	var searchInfoWindow = null;
	function searchAllCoach() {
		$.ajax({
			url:"/vi_user_coach/all",
			type:"get",
			success:function(data) {
				for (var i = 0; i < data.length; i++) {
					var uphone = null;
					if(data[i].uphone == 'unKnown') {
						uphone = '待完善';
					} else {
						uphone = data[i].uphone;
					}
				    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                        '<img src="../images/'+data[i].headImage+'" alt="没脸见人呐" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                        '地址：'+data[i].address+'<br/>电话：'+uphone+'<br/>简介：'+data[i].cintroduction+'<br/><div id="coachInfo" onclick="viewCoachDetailed('+data[i].uid+')">查看详情>>></div>'+
                        '</div>';
					var add = data[i].address;
					// 解析地址，添加标注
					geocodeSearch(add,i,content,data[i].cname);
					
				}
			}
		});
	}
	//点击显示详细信息
	function viewCoachDetailed(uid) {
		$.ajax({
			url:"/vi_user_coach/searchSelectCoachByUid",
			type:"post",
			data:{"uid":uid},
			success:function(result) {
				var res = result.coach;
				// 将认证id转为实际意义
				var authentication ="";
				if(res.authentication == 0) {
					authentication = "未认证";
				} else if(res.authentication == 1) {
					authentication = "场馆认证";
				} else {
					authentication = "官方认证";
				}
				// 评分为0时转为暂未评分
				var cgrade = null;
				if(res.cgrade == 0) {
					cgrade = '暂无评分';
				} else {
					cgrade = res.cgrade;
				}
				
				// 电话为完善的改为待完善
				var uphone = null;
				if(res.uphone == 'unKnown') {
					uphone = '待完善';
				} else {
					uphone = res.uphone;
				}
				
				
				var content = '<div>' +
	                '<div style="width:30%;float:right;"><img src="../images/'+res.headImage+'" alt="没脸见人呐" style="zoom:1;overflow:hidden;width:120px;height:150px;margin-left:3px;"/><br/><br/>';
	            if([[${session.userRole}]] == "student") {
	            	content += '<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" id="bookCoach" style="width:120px">点击约私教</button><br/><br/>';
	            }
                if([[${session.userRole}]] == "gym") {
	            	content += '<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" id="signContract" style="width:120px">签约教练</button><br/><br/>';
	            } 
	                 // 此处应根据当前登录的账户的类型显示不同的按钮 学员 联系场馆 场馆 签约 
                content += '<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="contact" style="width:120px">发起会话</button><br/><br/>' +
	                //'<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" style="width:120px">给TA留言</button><br/><br/>' +    // 留言功能未实现
	                '<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="addFollow" style="width:120px">关注TA</button></div>' +
	              	'<div style="width:70%;border-right:solid darkgray 1px">'+
	                '<div><div class="coach-info-content">真实姓名</div><div style="width:70%;float:right;">'+res.cname+'</div></div><br/><br/>'+
	                
	                '<div><div class="coach-info-content">评分</div><div style="width:70%;float:right;">'+cgrade+'</div></div><br/><br/>'+
	                '<div><div class="coach-info-content">认证</div><div style="width:70%;float:right;">'+authentication+'</div></div><br/><br/>';
	             if(res.authentication == 1) {
	            	 content += '<div><div class="coach-info-content">认证场馆</div><div style="width:70%;float:right;">'+result.gym.gname+'</div></div><br/><br/>';
	             }
	             content += '<div><div class="coach-info-content">简介</div><div style="width:70%;float:right;">'+res.cintroduction+'</div></div><br/><br/>'+
	                '<div><div class="coach-info-content">流派</div><div style="width:70%;float:right;">'+res.style+'</div></div><br/><br/>'+
	                '<div><div class="coach-info-content">上课时间</div><div style="width:70%;float:right;">'+res.time+'</div></div><br/><br/>'+
	                '<div><div class="coach-info-content">电话</div><div style="width:70%;float:right;">'+uphone+'</div></div><br/><br/>'+
	                '<div><div class="coach-info-content">收费</div><div style="width:70%;float:right;">'+res.price+'元/小时</div></div><br/><br/>'+
	                '<div><div class="coach-info-content">地址</div><div style="width:70%;float:right;">'+res.address+'</div></div><br/><br/>';
	             // 判断信息公开度
	             if(res.publicLevel == 0 || res.publicLevel == 1) {
	            	 content += '<div><div class="coach-info-content">性别</div><div style="width:70%;float:right;">'+res.csex+'</div></div><br/><br/>'+
		                '<div><div class="coach-info-content">年龄</div><div style="width:70%;float:right;">'+res.cage+'</div></div><br/><br/>';
	             }
	             // 无邮箱则不显示
	             if(res.umail != 'unKnown') {
	            	 content +='<div><div class="coach-info-content">邮箱</div><div style="width:70%;float:right;">'+res.umail+'</div></div><br/><br/>';
	             }
	             content +='</div></div>';
				 var obj={
			           type:"layerFadeIn",
			           title:res.nickName,
			           close:"true",
			           content:content,
			           area:["600px","auto"],
			       };
			       method.msg_layer(obj);
			       
			    // 发起会话
				$(document).on("click","#contact",function() {
					location.href="http://localhost:8080/chat/chatWindow?currentUid="+[[${session.uid}]]+"&talkerUid="+res.uid;
				});	
			    
			    // 约私教
			    $("#bookCoach").click(function() {
			    	$.ajax({
			    		url:"/userAction/sendRequest",
			    		type:"post",
			    		data:{
			    			"uid":[[${session.uid}]],
			    			"cid":res.cid,
			    			"price":res.price
			    		},
			    		success:function(data) {
			    			// 约私教成功
			    			if(data.indexOf("成功") != -1) {
			    				alert(data);
			    			}
			    			// 余额不足的时候
			    			if(data.indexOf("余额不足") != -1) {
			    				if(confirm("您的余额不足，是否现在充值？")) {
			    					location.href="http://localhost:8080/userAction/findUserByUid?uid="+[[${session.uid}]];
			    				} else {
			    					location.reload();
			    				}
			    			}
			    			// 课时费发生变化后
			    			if(data.indexOf("价格已发生改变") != -1) {
			    				alert(data);
			    				location.reload();
			    			}
			    		}
			    	});
			    });
			    
			    // 添加关注
			    $("#addFollow").click(function() {
			    	$.ajax({
			    		url:"/user/addFollow",
			    		type:"post",
			    		data:{
			    			currentUid:[[${session.uid}]], // 当前登录账户的uid
			    			follower:uid // 当前选中的账号的id
			    		},
			    		success:function(follow) {
			    			alert(follow);
			    		}
			    		
			    	});
			    });
			    
			    
			}
		});
		
	}
	
	// 地址解析
	function geocodeSearch(add,index,content,cname){
		myGeo.getPoint(add, function(point){
			if (point) {
				var address = new BMap.Point(point.lng, point.lat);
				addMarker(address,index,content,cname);//new BMap.Label(add,{offset:new BMap.Size(20,-10)})
			}
		}, "成都市");
	}
	
	// 编写自定义函数,创建标注
	function addMarker(point,index,content,cname){
		// 判断条目数超过11 全部更换为没有字母的标注
		if(index < 11) {
			var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
			    offset: new BMap.Size(10, 25),
			    imageOffset: new BMap.Size(0, 0 - index * 25)
			  });
		} else {
			var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
			    offset: new BMap.Size(10, 25),
			    imageOffset: new BMap.Size(0, 0 - 11 * 25)
			  });
		}
		
		var marker = new BMap.Marker(point,{icon: myIcon});
		// 标注绑定点击事件
		 marker.addEventListener("click", function(e){
			//创建检索信息窗口对象
			searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
					title  : cname,      //标题
					width  : 290,             //宽度
					height : 105,              //高度
					panel  : "panel",         //检索结果面板
					enableAutoPan : true,     //自动平移
					searchTypes : [
						//BMAPLIB_TAB_SEARCH,   //周边检索
						BMAPLIB_TAB_TO_HERE,  //到这里去
						BMAPLIB_TAB_FROM_HERE //从这里出发
					]
				});
		    searchInfoWindow.open(marker);
	    });
		map.addOverlay(marker);
		//marker.setLabel(label);
	}
	
	layui.use(['form', 'layedit','layer','element','rate'], function(){
		  var form = layui.form //只有执行了这一步，部分表单元素才会自动修饰成功
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,element = layui.element //导航的hover效果、二级菜单等功能，需要依赖element模块
		  ,rate = layui.rate;
		  form.on('submit(searchCoach)', function(data){
			  // 获取所有上课时间的值
			    var arr = new Array();
	            $("input:checkbox[name='week']:checked").each(function(i){
	                arr[i] = $(this).val();
	            });
	            data.field.week = arr.join(",");//将数组合并成字符串
			   $.ajax({
				   url:"/vi_user_coach/searchCoach",
				   type:"post",
				   data:data.field,        
	               //dataType:'JSON', 
	               success:function(res) {
	            	   if (res != null && res.length != 0) {
	            		   // 清除地图上的所有标注
	            		   map.clearOverlays();
	            		   // 添加自己的位置标注
	            			myGeo.getPoint(userAddr, function(point){      
	            			    if (point) {      
	            			        map.centerAndZoom(point, 16);
	            			        var icon = new BMap.Icon("../icon/红色定位.png",new BMap.Size(32, 32), {
	            					    offset: new BMap.Size(10, 25),
	            					    imageOffset: new BMap.Size(0, 0)
	            					  });
	            			        map.addOverlay(new BMap.Marker(point,{icon: icon}));
	            			    }      
	            			 }, 
	            			"成都市");
	            		   // 将搜索出的教练的地址添加到地图上
	            		    //var searchInfoWindow = null;
	            		   for (var i = 0; i < res.length; i++) {
	            			    var uphone = null;
		       					if(res[i].uphone == 'unKnown') {
		       						uphone = '待完善';
		       					} else {
		       						uphone = res[i].uphone;
		       					}
	            			   var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
	                           		'<img src="../images/'+res[i].headImage+'" alt="没脸见人呐" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
	                           		'地址：'+res[i].address+'<br/>电话：'+uphone+'<br/>简介：'+res[i].cintroduction+'<br/><div id="coachInfo" onclick="viewCoachDetailed('+res[i].uid+')">查看详情>>></div>'+
	                        		'</div>';
	            			   var searchAddress = res[i].address;
	            			// 解析地址，添加标注
	            			   geocodeSearch(searchAddress,i,content,res[i].cname);
	            		   }
	            		   
	            		} else {
	            		 layer.msg('亲！找不到你想要的教练哦！')
	            		}
	               }
			   });
			   return false;
		  });
		// 评分半星效果,只读
		  /* rate.render({
		    elem: '#aaa'
		    ,value: 4
		    ,half: true
		    ,readonly: true
		  }); */
		 
		  //……
		  
		  //但是，如果你的HTML是动态生成的，自动渲染就会失效
		  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
		  form.render();
		}); 
</script>


 